# Modal

## Installation
`npm i @snack-uikit/modal`

[Changelog](./CHANGELOG.md)

Пакет экспортирует 2 компонента:
- `Modal` - компонент модального окна с определенным поведением и параметрами
- `ModalCustom` - конструктор модального окна, позволяющий собрать компонент самостоятельно
  Содержит в себе дополнительные компоненты:
  - `ModalCustom.Header`
  - `ModalCustom.Body`
  - `ModalCustom.Footer`

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## ModalCustom
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| children* | `ReactNode` | - | Контент |
| onClose* | `() => void` | - | Колбек закрытия компонента. |
| open* | `boolean` | - | Управляет состоянием показан/не показан. |
| mode | enum Mode: `"regular"`, `"aggressive"`, `"forced"` | regular | Режим отображения модального окна: <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части |
| size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер модального окна |
| className | `string` | - | CSS-класс |
## ModalCustom.Header
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| title* | `ReactNode` | - | Заголовок модального окна |
| titleTooltip | `ReactNode` | - | Тултип для заголовка |
| subtitle | `ReactNode` | - | Подзаголовок |
| picture | `JSXElementConstructor<{ size?: number; className?: string; }> \| ModalHeaderImage` | - | Можно передать иконку из пакета `@snack-uikit/icon-predefined` или путь к картинке и атрибут `alt` |
| align | enum ContentAlign: `"default"`, `"center"` | - | Выравнивание контента |
| className | `string` | - | CSS-класс |
## ModalCustom.Body
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| content* | `ReactNode` | - | Содержимое модального окна |
| align | enum ContentAlign: `"default"`, `"center"` | - | Выравнивание контента |
| className | `string` | - | CSS-класс |
## ModalCustom.Footer
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| actions* | `ReactNode` | - | Параметр для передачи кнопок |
| disclaimer | `ReactNode` | - | Параметр для небольшого текста под кнопками |
| align | enum Align: `"vertical"`, `"default"`, `"center"` | - | Выравнивание контента |
| className | `string` | - | CSS-класс |
## Modal
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| approveButton* | `Omit<ButtonFilledProps, "data-test-id" \| "size">` | - | Основная кнопка действия |
| title* | `string` | - | Заголовок модального окна |
| onClose* | `() => void` | - | Колбек закрытия компонента. |
| open* | `boolean` | - | Управляет состоянием показан/не показан. |
| mode | enum Mode: `"regular"`, `"aggressive"`, `"forced"` | regular | Режим отображения модального окна: <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части |
| className | `string` | - | CSS-класс |
| titleTooltip | `ReactNode` | - | Всплывающая подсказка для заголовка |
| subtitle | `string` | - | Подзаголовок |
| content | `ReactNode` | - | Содержимое модального окна |
| cancelButton | `Omit<ButtonOutlineProps, "data-test-id" \| "size">` | - | Кнопка отмены |
| additionalButton | `Omit<ButtonSimpleProps, "data-test-id" \| "size">` | - | Вторая кнопка действия |
| disclaimer | `{ text: string; link?: Pick<LinkProps, "text" \| "href" \| "target" \| "external">; }` | - | Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку |
| truncate | `{ title?: number; subtitle?: number; }` | '{ <br>title: 1; <br>subtitle: 2; }' | Максимальное кол-во строк <br> - `title` - в заголовке <br> - `subtitle` - в подзаголовке |
| size | "s" \| "m" \| "l" | s | Размер |
| align | enum Align: `"vertical"`, `"default"`, `"center"` | default | Выравнивание, для разных размеров доступны разные значения <br> для size=`s` - все <br> для size=`m` - align=`default \| center` <br> для size=`l` - align=`default` |
| picture | `JSXElementConstructor<{ size?: number; className?: string; }> \| ModalHeaderImage` | - | Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt` |


[//]: DOCUMENTATION_SECTION_END